import 'package:flutter/material.dart';
import 'package:ost_flutter_module/widget/custom_widget/image_text_button.dart';

typedef OnItemTap<T> = void Function(T value);

/// Dropdown header widget.
class DropDownHeader extends StatefulWidget {
  final Color color;
  final double borderWidth;
  final Color borderColor;
  final TextStyle style;
  final TextStyle dropDownStyle;
  final double iconSize;
  final Color iconColor;
  final Color iconDropDownColor;

  final double height;
  final double dividerHeight;
  final Color dividerColor;
  final OnItemTap onItemTap;
  final List<DropDownHeaderItem> items;

  DropDownHeader({
    Key key,
    this.style = const TextStyle(color: Color(0xFF999999), fontSize: 14),
    this.dropDownStyle,
    this.height = 44,
    this.iconColor = const Color(0xFFafada7),
    this.iconDropDownColor,
    this.iconSize = 20,
    this.borderWidth = 0,
    this.borderColor = const Color(0xFFeeede6),
    this.dividerHeight = 20,
    this.dividerColor = const Color(0xFFeeede6),
    this.onItemTap,
    this.color = Colors.white,
    this.items,
  }) : super(key: key);

  @override
  _DropDownHeaderState createState() => _DropDownHeaderState();
}

class _DropDownHeaderState extends State<DropDownHeader>
    with SingleTickerProviderStateMixin {
  bool _isShowDropDownItemWidget = false;
  double _screenWidth;
  int _menuCount;
  GlobalKey _keyDropDownHeader = GlobalKey();
  TextStyle _dropDownStyle;
  Color _iconDropDownColor;

  bool selected;

  @override
  void initState() {
    super.initState();
    selected = false;
  }

  @override
  Widget build(BuildContext context) {
    _dropDownStyle = widget.dropDownStyle ??
        TextStyle(color: Theme.of(context).primaryColor, fontSize: 13);
    _iconDropDownColor =
        widget.iconDropDownColor ?? Theme.of(context).primaryColor;

    MediaQueryData mediaQuery = MediaQuery.of(context);
    _screenWidth = mediaQuery.size.width;
    _menuCount = widget.items.length;

    var gridView = GridView.count(
      physics: NeverScrollableScrollPhysics(),
      crossAxisCount: _menuCount,
      childAspectRatio: (_screenWidth / _menuCount) / widget.height,
      children: widget.items.map<Widget>((item) {
        return _menu(
          item,
          widget.items.indexOf(item),
        );
      }).toList(),
    );

    return Container(
      key: _keyDropDownHeader,
      height: widget.height,
      decoration: BoxDecoration(
        border: Border.all(
          color: widget.borderColor,
          width: widget.borderWidth,
        ),
      ),
      child: gridView,
    );
  }

  dispose() {
    super.dispose();
  }

  _menu(DropDownHeaderItem item, int index) {
    return GImageTextButton(
      item.title ?? '',
      icon: selected ? Icons.arrow_drop_up : Icons.arrow_drop_down,
      iconSize: 12,
      borderRadius: 0,
      textLeadingPadding: 4,
      style: ImageTextStyle.imageRight,
      onTap: (_) {
        print('grid idnex = $index');
        item.isChoosed = !item.isChoosed;
        selected = !selected;
        widget.onItemTap(item.index);
        setState(() {});
      },
    );
    //GTextButton(title: item.title ?? '');
//     int index = widget.items.indexOf(item);
//     int menuIndex = widget.controller.menuIndex;
//     _isShowDropDownItemWidget = index == menuIndex && widget.controller.isShow;

//     return GestureDetector(
//       onTap: () {
//         final RenderBox? overlay =
//             widget.stackKey.currentContext!.findRenderObject() as RenderBox?;

//         final RenderBox dropDownItemRenderBox =
//             _keyDropDownHeader.currentContext!.findRenderObject() as RenderBox;

//         var position =
//             dropDownItemRenderBox.localToGlobal(Offset.zero, ancestor: overlay);
// //        print("POSITION : $position ");
//         var size = dropDownItemRenderBox.size;
// //        print("SIZE : $size");

//         widget.controller.dropDownMenuTop = size.height + position.dy;

//         if (index == menuIndex) {
//           if (widget.controller.isShow) {
//             widget.controller.hide();
//           } else {
//             widget.controller.show(index);
//           }
//         } else {
//           if (widget.controller.isShow) {
//             widget.controller.hide(isShowHideAnimation: false);
//           }
//           widget.controller.show(index);
//         }

//         if (widget.onItemTap != null) {
//           widget.onItemTap!(index);
//         }

//         setState(() {});
//       },
//       child: Container(
//         color: widget.color,
//         child: Row(
//           mainAxisAlignment: MainAxisAlignment.center,
//           children: <Widget>[
//             Expanded(
//               child: Row(
//                 mainAxisAlignment: MainAxisAlignment.center,
//                 children: <Widget>[
//                   Flexible(
//                     child: Text(
//                       item.title,
//                       maxLines: 1,
//                       overflow: TextOverflow.ellipsis,
//                       style: _isShowDropDownItemWidget
//                           ? _dropDownStyle
//                           : widget.style.merge(item.style),
//                     ),
//                   ),
//                   Icon(
//                     !_isShowDropDownItemWidget
//                         ? item.iconData ?? Icons.arrow_drop_down
//                         : item.iconDropDownData ??
//                             item.iconData ??
//                             Icons.arrow_drop_up,
//                     color: _isShowDropDownItemWidget
//                         ? _iconDropDownColor
//                         : item.style?.color ?? widget.iconColor,
//                     size: item.iconSize ?? widget.iconSize,
//                   ),
//                 ],
//               ),
//             ),
//             index == widget.items.length - 1
//                 ? Container()
//                 : Container(
//                     height: widget.dividerHeight,
//                     decoration: BoxDecoration(
//                       border: Border(
//                         right: BorderSide(color: widget.dividerColor, width: 1),
//                       ),
//                     ),
//                   ),
//           ],
//         ),
//       ),
//     );
  }
}

class DropDownHeaderItem {
  final String title;
  final IconData iconData;
  final IconData iconDropDownData;
  final double iconSize;
  final TextStyle style;
  final int index;
  bool isChoosed;

  DropDownHeaderItem({
    this.title,
    this.isChoosed = false,
    this.iconData,
    this.iconDropDownData,
    this.iconSize,
    this.style,
    this.index,
  });
}
